<template>
  <div class="department-wrap">
    <el-tree :data="departmentList" :props="defaultProps" default-expand-all>
      <div slot-scope="{ data: myData }" class="item-wrap">
        <div class="left">{{ myData.name }}</div>
        <div class="right">
          <div class="rigth-handler">{{ myData.managerName }}</div>
          <!-- <el-dropdown :hide-on-click="false" @command="handleCommand"> 函数绑定事件不写小括号，默认有个事件对象， 用户点击这个按钮，由系统去调用这个函数， handleCommand(系统自动帮你传参) -->
          <!-- 像下面这种手动调用函数，直接加一个小括号，那么默认事件对象就不见了，必须通过默认内置的变量 $event传递以下 -->
          <el-dropdown :hide-on-click="false" @command="handleCommand($event, myData.id)">
            <!-- <div @click="fn">
            <div @click="fn($event)"> 这两个写法一模一样-->
            <div>
              操作<i class="el-icon-arrow-down el-icon--right" />
            </div>
            <el-dropdown-menu slot="dropdown">
              <!-- <el-dropdown-item @click.native="add">添加子部门</el-dropdown-item> -->
              <el-dropdown-item command="add">添加子部门</el-dropdown-item>
              <el-dropdown-item command="edit">编辑部门</el-dropdown-item>
              <el-dropdown-item command="del">删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </el-tree>

    <!-- 弹出框组件 -->
    <!-- <addDialogVue :dialog-visible="dialogVisible" @update:visible="close" /> -->
    <addDialogVue :visible.sync="dialogVisible" :list="list" :current-id="currentId" :is-edit="isEdit" @ADD_SUCCESS="department" @RESET_PROPS="resetProps" />
  </div>
</template>

<script>
import { departmentRequest, deleteDepartmentRequest } from '@/api/department'
import { transfromListToTree } from '@/utils'
import addDialogVue from './components/addDialog.vue'
import _ from 'lodash'
// import { cloneDeep } from 'lodash'   yarn add lodash === npm i lodash

export default {
  components: { addDialogVue },
  data() {
    return {
      list: [],
      departmentList: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      dialogVisible: false, // 控制新增弹出框的显示隐藏， 变量要放在父组件里面，不能放在子组件
      currentId: '',
      isEdit: false
    }
  },
  created() {
    this.department()
  },
  methods: {
    async department() {
      const res = await departmentRequest()
      // 下面这个数据是给子组件 进行去重判断的
      this.list = res.data
      // 下面这个数据 是将平铺结构转换为树状结构，给el-tree组件渲染使用的
      const tmp = _.cloneDeep(res.data) // 将数据深拷贝，防止下面函数将原始数据进行修改
      this.departmentList = transfromListToTree(tmp, 0)
    },
    handleCommand(value, id) {
      this.currentId = id
      if (value === 'add') {
        // 这是新增的逻辑，应该打开弹出框 --- 二次封装element-ui的弹出框组件
        this.dialogVisible = true
        this.isEdit = false
      } else if (value === 'edit') {
        // 这就是编辑功能
        this.dialogVisible = true
        this.isEdit = true
      } else {
        // 这里就是最后写的 删除功能
        this.$confirm('是否确定删除该部门?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'error'
        }).then(async() => {
          await deleteDepartmentRequest(id)
          this.department()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      }
    },
    close() {
      this.dialogVisible = false
    },
    resetProps() {
      // 其他父组件传递个子组件的 3个属性，不需要重置值
      this.currentId = ''
    }
  }
}
</script>

<style lang="scss" scoped>
.department-wrap {
  .item-wrap {
    display: flex;
    width: 100%;
    justify-content: space-between;
    .left {
      flex: 1;
      // background-color: lightblue;
    }
    .right {
      // background-color: lightgreen;
      .rigth-handler {
        display: inline-block;
        margin-right: 15px;
      }
    }
  }
}
</style>
